import { useClientLoaderData } from 'umi'
import style from './comments.less'
import axios from 'axios'
import { useEffect, useState } from 'react'


interface IComment {
  userId: number;
  id: number;
  title: string;
  body: string;
}
export default function () {
  // const [list, setList] = useState([])
  const { data: list = [] } = useClientLoaderData()
  // 调用接口
  async function fetchData() {
    const res = await axios.get('http://jsonplaceholder.typicode.com/posts')
    // setList(res.data)
  }

  useEffect(() => {
    // fetchData()
  }, [])
  return (
    <div>
      <div className={style.title}>
        <div>
          {list.map((item: IComment, index: number) => (
            <div key={index}>{item.title}</div>
          ))}
        </div>
      </div>
    </div>
  )
}

export async function clientLoader() {
  const { data } = await axios.get('http://jsonplaceholder.typicode.com/posts');
  return data;
}